<template>
  <div class="height-100" id="height-200">
    <transition
      name="custom-classes-transition"
      enter-class="animated backInLeft"
      leave-active-class="animated bounceOutLeft"
    >
      <el-card
        class="box-card"
        body-style="width:100%;height:100%;"
        :style="{
          marginLeft: leftAttr_status ? '0' : '-350px',
          width: '350px',
          height: '100%',
        }"
        v-show="leftAttr_status"
      >
        <div class="panel">
            <h3 style="height: 23px">
              属性列表<i v-show="isOnEdit" style="color: red; font-size: 16px"
                >*</i
              >
              <span v-show="isOnEdit">
                <i
                  class="el-icon-warning-outline"
                  style="color: red; font-size: 16px"
                  >正在编辑</i
                >
              </span>
            </h3>
            <div
              style="height: 720px; overflow-y: auto; width: 100%;"
            >
              <el-form label-position="right" label-width="80px">
                <el-form-item
                  v-for="(item, index) in attrlist"
                  :key="index + '1'"
                  :label="'demo' + item.index"
                >
                  <span slot="label" v-if="!item.isEdit">
                    {{ item.name }}
                  </span>
                  <span slot="label" v-else>
                    <el-input
                      v-model.trim="item.name"
                      size="small"
                      @change="BeingEnter(item.name, index)"
                      readonly
                    ></el-input>
                  </span>
                  <el-input
                    v-model.trim="item.value"
                    size="small"
                    readonly
                    style="width: calc(80% - 20px)"
                  ></el-input>
                  <div
                    style="
                      display: inline-block;
                      width: 20%;
                      line-height: 40px;
                      vertical-align: middle;
                    "
                  >
                  </div>
                </el-form-item>
              </el-form>
            </div>
        </div>
      </el-card>
    </transition>
  </div>
</template>

<script>
export default {
  props: {
    attrlist: {
      type: Array,
      default: [],
    },
    leftAttr_status: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    attrlist(newV) {
      console.log(newV);
      this.$forceUpdate();
      this.loadinglist = newV;
    },
  },
  data() {
    return {
      newInput: [], //添加多少行输入框
      loadinglist: [], //属性列表
      formData: {
        name: "",
        value: "",
        isEdit: true,
      },
      isOnEdit: false, //是否处于编辑状态
      numArr: [], //新属性下标
    };
  },
  methods: {
  },
};
</script>

<style lang="less" scoped>
.panel {
  width: 100%;
  height: 100%;
  margin: 0;
  h3 {
    padding-left: 10px;
    border-left: 4px solid #409eff;
    margin-top: 3px;

    span {
      position: absolute;
      right: 10px;
      top: 15px;
      cursor: pointer;
      font-size: 17px;
    }
  }
  .slarm {
    width: 100%;
    height: 100%;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
    align-items: center;
  }
  .popoverMsg {
    margin: 0;
    padding: 0;
    font-size: 12px;
    color: red;
  }
}
</style>